<template>
  <div>
    <h2 class="text-4xl mb-2">{{ displayTitle }}</h2>
    <p class="text-zinc-500 text-lg">{{ desc }}</p>

    <div class="w-full flex justify-center">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import sidebarRoutes from '@/routes/sidebar'

interface Props {
  title?: string
  desc?: string
}

const { title, desc = '' } = defineProps<Props>()

const route = useRoute()

const displayTitle = computed(
  () => title ?? sidebarRoutes.find(item => item.path === route.path)?.name
)
</script>

<style scoped lang="scss"></style>
